<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ include file="./nav.jsp" %>
<%@ include file="./editorNav.jsp" %>
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1 editor-model">
            <div>
                <div class="form-group">
                    <label for="tagId" class="col-sm-1 control-label manage-item">板块</label>
                    <select id="tagId" class="form-control manage-item" style="width:50%;">
                        <option value="-1">请选择</option>
                        <c:forEach items="${types.tags}" var="tag">
                            <option value="${tag.tagsId}">${tag.tagsName}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="form-group">
                    <label for="typeId" class="col-sm-1 control-label manage-item">分类</label>
                    <select id="typeId" class="form-control manage-item" style="width: 50%;">


                    </select>
                </div>
                <div class="form-group">
                    <label for="tittle" class="col-sm-1 control-label manage-item">标题</label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control manage-item" id="tittle" style="height: 40px;">
                    </div>
                </div>
            </div>

            <div  style="height: 50px;"></div><!--这里加上是为了让提示信息显示 不然会被遮挡-->
            <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
                <div class="btn-group">
                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font">
                        <i class="icon-font"></i><b class="caret"></b></a>
                    <ul class="dropdown-menu"> </ul>
                </div>
                <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height">

                </i> <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                    <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                    <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                </ul>
                </div>
                <div class="btn-group">
                <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a> <!--加粗-->        <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
                <!-- 斜体-->
                <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
                <!-- 删除线-->
                <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
                <!-- 下划线-->
                </div>
                <div class="btn-group">
                    <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
                    <!-- 加点-->
                    <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
                    <!-- 数字排序-->
                    <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
                    <!-- 减少缩进-->
                    <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
                    <!--增加缩进-->
                </div>
                <div class="btn-group">
                    <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
                    <!--左对齐-->
                    <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
                    <!--居中-->
                    <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
                    <!--右对齐-->
                    <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
                    <!--垂直对齐-->
                </div>
                <div class="btn-group">
                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
                    <!-- 链接-->
                    <div class="dropdown-menu input-append">
                        <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
                        <button class="btn" type="button">Add</button>
                    </div>
                    <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
                </div>
                <div class="btn-group">
                    <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
                    <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
                </div>    <div class="btn-group">
                <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
                <!--撤销-->
                <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
                <!--恢复-->
            </div>
                <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech=""></div>
            <div id="editor">

            </div>

            <div style="float: right">
                <button type="button" class="btn btn-default manage-item">取消</button>
                <button type="button" class="btn btn-default manage-item" onclick="createNote()">提交</button>
            </div>



        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {


    $('#editor').wysiwyg();
    $(function(){
        function initToolbarBootstrapBindings() {
            var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
                'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
                'Times New Roman', 'Verdana'],
                fontTarget = $('[title=Font]').siblings('.dropdown-menu');
            $.each(fonts, function (idx, fontName) {
                fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
            });
            $('a[title]').tooltip({container:'body'});
            $('.dropdown-menu input').click(function() {return false;})
                .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
                .keydown('esc', function () {this.value='';$(this).change();});
            $('[data-role=magic-overlay]').each(function () {
                var overlay = $(this), target = $(overlay.data('target'));
                overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
            });
            $('#voiceBtn').hide();
            if ("onwebkitspeechchange"  in document.createElement("input")) {
                var editorOffset = $('#editor').offset();
                $('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
            } else {
                $('#voiceBtn').hide();
            }
        };
        function showErrorAlert (reason, detail) {
            var msg='';
            if (reason==='unsupported-file-type') {
                msg = "Unsupported format " +detail;
            } else {
                console.log("error uploading file", reason, detail);
            }
            $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button>'+
                '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
        };
        initToolbarBootstrapBindings();
        $('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
    });

    $("#tagId").change(function () {
        var tagid = $("#tagId").val();
        var option="<option value=\"-1\">请选择</option>";
        $.post("${pageContext.request.contextPath}/api/user/note/getType",{"tagId":tagid},function (data) {
            for (let i=0;i<data.length;i++){
                option+="<option value='"+data[i].typeid+"'>"+data[i].typename+"</option>";
            }
            $("#typeId").html(option);

        });

    });



    })

    function createNote() {

        var typeid = $("#typeId").val();
        var tittle = $("#tittle").val();
        var note =  $('#editor').html();
        $.post("${pageContext.request.contextPath}/api/user/note/create",
            {"typeid":typeid,"tittle":tittle,"text":note},function (data) {
                if (data.success==1){

                    window.location.href="${pageContext.request.contextPath}/api/type/";
                } else{
                    alert("添加失败！");
                }
            })
    }
</script>

</body>
</html>
